<template>
	<view class="container" style="padding: 24px; box-sizing: border-box;">
		<!-- 顶部栏 -->
		<view class="top-bar">
			<view class="menu-button" @click="goToMenu">
				<uni-icons type="bars" size="28" style="color: white;"></uni-icons>
				<text class="menu-text">目录</text>
			</view>
		</view>

		<!-- 文本框区域 -->
		<view class="text-box-wrapper">
			<view class="text-box">
			</view>
		</view>
		

		<!-- 按钮区域 -->
		<view class="btn-area">
			<u-cell-group style="width: 92%; border-radius: 15px; overflow: hidden; background-color: white; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);">
				<u-cell
					id="choice"
					class="cell"
					icon="minus-circle-fill"
					icon-style="font-size: 20px; color: #71B5A0;"
					title="低压"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					size="large"
					isLink
					url="/pages/low_voltage/low_voltage"
				></u-cell>
				<u-cell
					id="choice"
					class="cell"
					icon="plus-circle-fill"
					icon-style="font-size: 20px; color: #71B5A0;"
					title="高压"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					size="large"
					isLink
					url="/pages/high_voltage/high_voltage"
				></u-cell>
				<u-cell
					id="choice"
					class="cell"
					icon="grid"
					icon-style="font-size: 20px; color: #71B5A0;"
					title="通用票"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					size="large"
					isLink
					url="/pages/empty_template/empty_template"
				></u-cell>
			</u-cell-group>
			<!-- <button @click="toTest" class="button" style="background-color: forestgreen">test</button> -->
			<!-- <button @click="toHigh" class="button" style="background-color: indianred">高压</button>
			<button @click="" class="button" style="background-color: white">空白票模板</button> -->
			<!-- <button @click="importTemplate()" class="button" style="background-color: bisque;">导入模板</button> -->
		</view>
	</view>
</template>

<script>
	 var AfDocument = uni.requireNativePlugin("Aq-ChooseFile");
	export default {
		methods: {
			 open(){
				AfDocument.openMode({
					size: '10', //选择总数量
					paths:['/storage/emulated/0/Download','/storage/emulated/0/A',],   //自定义选择目录
					isDown:true,//是否下钻（true 筛选当前目录以下的所有文件，fales 只筛选当前目录文件） 
					types:[{
						name:'文档',
						value:["doc","wps","docx","xls","xlsx","pdf"]
					},{
						name:'视频',
						value:["mp4"] 
					},{
						name:'音乐',
						value:['mp3','flac'] 
					},{
						name:'图片',
						value:['jpg','png'] 
					}]
				},(res)=>{
					this.data = JSON.stringify(res);
				})
			},
			toTest(){
				uni.navigateTo({
					url:"/pages/test/test"
				})
			},
			toLow() {
				uni.navigateTo({
					url: '/pages/low_voltage/low_voltage'
				});
			},
			toHigh() {
				uni.navigateTo({
					url: '/pages/high_poweroff/high_poweroff'
				});
			},
			goBack() {
				uni.navigateBack(); // 返回上一页
			},
			goToMenu() {
				uni.navigateTo({
					url: '/pages/menu/menu' 
				});
			},
			//导入模板
			importTemplate(){
				uni.navigateTo({
					url:'/pages/test/test'
				})
			}
			//
		}
	}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 100vh; 
}

.top-bar {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 80rpx;
	margin-bottom: 20rpx;
}

.menu-button {
	display: flex;
	align-items: center;
	padding: 12rpx 28rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 35rpx;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.menu-button:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.3);
}

.menu-text {
	color: white;
	font-size: 34rpx;
	margin-left: 12rpx;
	font-weight: 500;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	letter-spacing: 2rpx;
}

.text-box-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 60rpx; /* 距离顶部一定的间距 */
}

.text-box {
	width: 80%; /* 控制文本框宽度 */
	display: flex;
	padding: 2%;
	justify-content: center;
	align-items: center;
	font-size: 38rpx;
	color: black;
	font-style: oblique;
	font-weight: bold;
	letter-spacing: 0.5em;
}

.btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 20%;
	padding: 0 15px;
}

.button{
	margin-bottom: 60rpx;
	width: 80%;
	font-weight: 550;
}

/* 修改u-cell-group样式 */
:deep(.u-cell-group) {
	border-radius: 15px !important;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
	background: white !important;
}

/* 修改u-cell样式 */
:deep(.u-cell) {
	margin: 8px 0;
	background: white !important;
	transition: all 0.3s ease;
}

:deep(.u-cell:not(:last-child)) {
	border-bottom: 1px solid rgba(113, 181, 160, 0.2) !important;
}

:deep(.u-cell:active) {
	background: rgba(113, 181, 160, 0.08) !important;
	transform: scale(0.98);
}

#choice{
	
}

</style>
